<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue常用特性之表单操作</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <div>
            不带参数设置自动获取到输入焦点的指令：
            <input type="text" name="" value="" v-focus>
        </div>
        <div>
            带参数设置控件的背景颜色的自定义指令：
            <!-- <input type="text" name="" value="" v-setColor='backgroundColor'> -->
            <div v-color='backgroundColor'>
                我是谁
            </div>
        </div>

        <p>-------------------</p>
        <!-- 设置计算属性 -->

        <div>
            <span>{{revers}}</span>
            <!-- 如果使用计算属性的值 没有发生改变 则会使用计算属性缓存的值 则计算属性只会调用一次 -->
            <span>{{change}}</span>
            <span>{{revers}}</span>
        </div>
        <div>
            <!-- 方法的调用在插值表达式中需要用()表示方法调用 -->
            <span>{{reversemessage()}}</span>
            <span>{{reversemessage()}}</span>
        </div>

        <p>-------------过滤器的使用----------------</p>
        <!-- 过滤器的使用   全局和局部过滤器-->

        <div>
            <input type="text" name="" value="" v-model='inputValue'>
        </div>
        <div>
            <span>{{inputValue | upper}}</span>
        </div>
    </div>
    <script>
        // 自定义一个全局指令

        Vue.directive('focus', {
            inserted: function (el) {
                el.focus()
            }
        })


        Vue.filter(
            'formate', {
            function(val, arg) {
                // 日期格式化
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份 
                        "d": date.getDate(), //日 
                        "h": date.getHours(), //小时 
                        "m": date.getMinutes(), //分 
                        "s": date.getSeconds(), //秒 
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                        "S": date.getMilliseconds() //毫秒 
                    };

                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }
                return dateFormat(value, arg);
            }
        })

        // Vue.filter('upper', function (val) {
        //     return val.charAt(0).toUpperCase() + val.slice(1)
        // })

        // 自定义一个带参数的全局指令

        // Vue.directive('color', {
        //     inserted: function (el, binding) {
        //         el.style.backgroundColor = binding.value
        //     }
        // })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: '',
                backgroundColor: 'blue',
                data: [],
                inputValue: ''

            },
            methods: {
                handle: function () {
                    // lambda 表达式
                    this.data.findIndex(item => item.id === '18')
                },
                reversemessage: function () {
                    console.log('methods ------');
                    return this.backgroundColor.split('').reverse().join('')
                }
            },

            watch: {
                // 监听器 适合计算耗时较长 比较复杂过程的数据处理或者异步操作
                // attrName: function(val){}  属性名称 ： val是属性值
            },

            // 定义计算属性
            computed: {
                revers: function () {
                    console.log('computed-------');
                    return this.backgroundColor.split('').reverse().join('')
                },
                change: function () {
                    console.log('change ------- ');
                    this.backgroundColor = "red";
                    return this.backgroundColor;
                }
            },
            // 局部指令的定义
            directives: {
                color: function (el, binding) {
                    el.style.backgroundColor = binding.value
                }
            },
            // 局部过滤器定义
            filters: {
                upper: function (val) {
                    return val.charAt(0).toUpperCase() + val.slice(1)
                }
            },
            beforeCreate() {
                console.log('beforeCreate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforemount');
            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log('beforeupdate');
            },
            updated() {
                console.log('updated');
            },
            beforeDestroy() {
                console.log('before destroy');
            },
            destroyed() {
                console.log('destroyed');
            },

        })
    </script>
</body>

</html>

<!-- 表单操作基础 v-model数据的双向绑定(v-bind 属性绑定 v-on事件绑定) -->
<!-- 表单域修饰符 v-model (number、trim) lazy的意思是将input事件切换成change(焦点变化即失去焦点的时候触发该事件)事件   -->
<!-- 自定义指令  -->



<!-- 计算属性的使用 -->
<!-- 计算属性与方法的区别
计算属性基于它们依赖的缓存，而方法是没有缓存的 -->


<!-- 方法 计算属性 侦听器 三者的区别 -->


<!--生命周期函数

可以把vue看成是一个实例 在实例初始化到销毁过程中 会经历一系列生命周期函数-->

<!-- vue中的数组操作是响应式的 
根据操作数组是否对原数组有影响 可以分为变异方法和替换数组两种类型 -->